<template>
    <div class="box">
        <el-form :model="admin" label-width="120px">
            <el-form-item label="编号">
                <span>{{ admin.adminid }}</span>
            </el-form-item>

            <el-form-item label="姓名">
                <span>{{ admin.adminname }}</span>
            </el-form-item>

            <el-form-item label="密码">
                <el-input type="password" v-model="admin.password" />
            </el-form-item>

            <el-form-item label="角色">
                <el-radio-group v-model="admin.role">
                    <el-radio :label="1">超级管理员</el-radio>
                    <el-radio :label="2">普通管理员</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="saveFn">修改</el-button>                 
                <el-button type="primary" @click="cancelFn">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { reactive,watch} from "vue";
import { admin_admin_detail,admin_admin_update } from "../../../utils/api";
import {ElNotification}  from 'element-plus'
import "element-plus/es/components/notification/style/css"
// 先父传子listadmin.vue把数据传过来
// 子组件接受父组件传过来的数据
const props = defineProps<{
    adminname: string
}>()
// 定义类型
interface IAdmin {
    "adminname": string,
    "password": string,
    "role": number,//1:表示超级管理员，2：普通管理员
    "adminid": string,
    "checkedKeys": string[]
}
// 当前管理员的数据下面发情求获得的保存在这里
const admin = reactive<IAdmin>({
    "adminid": '',
    "adminname": "",
    "password": "",
    "role": 1,
    "checkedKeys": []
})
// 用父组件过来的数据发请求
const getadmin=()=>{
    admin_admin_detail({
        adminname:props.adminname
}).then((res: any) => {
        if (res.data.code === "200") {
            for (var value in res.data.data[0]) {
                admin[value] = res.data.data[0][value]
            }
            // console.log(res.data.data);
        }
        // console.log(admin);
    })
}
// 监听传过来的数据
watch(props, () => {
    getadmin()
    admin.password="";
}, {
    // 深度监听
    deep: true
})
// 子传父
// 声明事件
const emit = defineEmits<{
    (e: "hide"): void,
    (e:"updatesuccess"):void
}>();
// 
const cancelFn = () => {
    // 触发隐藏事件
    emit("hide");
}
// 修改管理员信息请求
const saveFn = ()=>{
    admin_admin_update({
        adminname: admin.adminname,
        password: admin.password,
        role: admin.role,
        checkedKeys: admin.checkedKeys
}).then((res: any)=>{
    if (res.data.code==200) {
        ElNotification({
        title:"提示",
        message: "修改成功",
        type: "success",
    })
        emit("hide");//关掉自己
        emit("updatesuccess");
    }
    })
}
</script>

<style scoped>
.box {
    width: 400px;
    height: 300px;
    border: 1px solid #e5e4e4;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #ededed;
    z-index: 999;
}
</style>